---
title: "01-js-import 和 export 的使用"
created: 2025-12-02
tags:
  - 项目
aliases:
  - js-import 和 export 的使用
  - js:import 和 export 的使用
---
# js:import 和 export 的使用

在 JavaScript 模块（Module）系统中，`import` 和 `export` 的使用与模块的定义和引入方式有关。让我们一步步来解释背后的原理。

### 1. `export` 和 `export default` 的区别

- `export`：用于导出模块中的一个或多个变量、函数或类。这种方式导出的是命名导出（Named
  Exports），可以在一个文件中导出多个内容。引入这些内容时，必须使用相同的名称，而且要用 `{}` 来括起来。

  ```javascript
  // File: GameObject.js

  export class GameObject {

    // ... class definition

  }

  export const player = new GameObject();
  ```

  在其他文件中可以这样导入：

  ```javascript
  import { GameObject, player } from "./GameObject";
  ```
- `export default`：用于导出模块的单一内容，这种方式导出的是默认导出（Default
  Export），一个文件中只能有一个默认导出。引入时可以自定义导入名称，不需要 `{}`。

  ```javascript
  // File: GameObject.js

  export default class GameObject {

    // ... class definition

  }
  ```

  在其他文件中可以这样导入：

  ```javascript
  import GameObject from "./GameObject";
  ```

### 2. 为什么需要 `{}`？

当使用 `export` 导出时，相当于在模块内部创建了一个命名空间（Namespace），所有通过 `export` 导出的内容都作为这个命名空间的属性。因此，在导入时必须使用 `{}` 来显式指定你想导入的具体属性。就像访问一个对象的属性一样。

### 3. `export default` 与 `public` 类似的概念

在 Java 中，`public` 修饰符指定类或方法可以在其他包中访问。Java 中的 `public class` 是文件的主要导出对象，每个
Java 文件最多只能有一个 `public` 类。这与 JavaScript 的 `export default` 有一定的相似之处，因为每个模块文件只能有一个默认导出，且默认导出在引入时可以不使用 `{}`。

### 4. 为什么命名导出要用 `{}`？

在 JavaScript 中，每个模块都可以有多个命名导出。为了防止命名冲突，命名导入使用 `{}` 来区分和指定具体的导出内容。

#### 示例：

假设你有一个 `MathUtils.js` 文件：

```javascript
// File: MathUtils.js

export const add = (a, b) => a + b;

export const multiply = (a, b) => a * b;
```

在另一个文件中引入：

```javascript
import { add, multiply } from "./MathUtils";
```

### 总结

- `export` 和 `import { ... }` 之间的关系类似于在模块文件中创建多个命名的导出变量或函数，而 `export default` 则允许你导出模块的单一默认内容。
- 使用 `{}` 可以精确指明导入的命名内容，从而避免冲突。
- `export default` 提供了一个更简洁的方式来导入模块的主要内容，与 Java 中的 `public class` 具有类似的语义。

---

**项目分区导航**： [[00-创建菜单与游戏界面|创建菜单与游戏界面]] ⬅️ | 01-js-import 和 export 的使用 |  ➡️ [[00-后端配置和调试|后端配置和调试]]